<script setup>
import { ref } from 'vue';
import MyFather from './MyFather.vue';
let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)
function updateA(num) {
  a.value += num
}
</script>
<template>
  <div class="myGrandpa">
    <h3>我是爷爷组件</h3>
    <p>爷爷的a:{{ a }}</p>
    <p>爷爷的b:{{ b }}</p>
    <p>爷爷的c:{{ c }}</p>
    <p>爷爷的d:{{ d }}</p>
    <MyFather :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" :updateA="updateA" />
  </div>
</template>
<style scoped>
.myGrandpa {
  background-color: #11bc30;
  padding: 10px;
  border: 1px solid rgb(176, 31, 123)
}
</style>